<template>
  <div style="width: 100%;height:100%;">
    <el-card style="width: 95%;height:100%;margin: 0 auto">
      <span v-if="!dataFlag">本问卷暂无数据</span>
      <div id="main" style="width: 100%;height: 600px"></div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "dataView",
  data() {
    return {
      drawer: true,
      viewDataX: {},
      dataFlag: true
    }
  }, method: {
    handleClose(done) {
      this.$router.go(-1)
    }
  }, mounted() {
    let _this = this
    this.$http.get("answer/viewData/" + _this.$route.params.id).then(res => {
      console.log("-------viewData------")
      console.log("res.data.vmList1.legend" + res.data.vmList1.length)
      if (res.flag == true && res.data.vmList1.length != 0) {
        console.log("-------viewDataTrue------")
        let myChart = _this.$echarts.init(document.getElementById('main'));
        console.log(res.data)
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {

            data: res.data.lengthDataList
          },
          series: [
            {
              name: '性别比例',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '20%'],
              label: {
                position: 'inner',
                fontSize: 14,
              },
              labelLine: {
                show: false
              },
              data: res.data.vmList1
            },
            {
              name: '年龄分布',
              type: 'pie',
              radius: ['45%', '80%'],
              labelLine: {
                length: 30,
              },
              label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,

                rich: {
                  a: {
                    color: '#6E7079',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#8C8D8E',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  b: {
                    color: '#4C5058',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 33
                  },
                  per: {
                    color: '#fff',
                    backgroundColor: '#4C5058',
                    padding: [3, 4],
                    borderRadius: 4
                  }
                }
              },
              data: res.data.vmList2
            }
          ]
        };
        myChart.setOption(option);
      } else {

        _this.dataFlag = false
      }
    })
  }, created() {
  }
}
</script>
<style scoped>
</style>